﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>操作DOM-jQuery操作表格</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
.odd{background: #f00;}
.even{background:#ccc;}
</style>
</head>
<body>
<div class="container-xl a1">
<h1>jquery操作表格隔行换色</h1>
<table class="table table-bordered tb1">
    <tr>
      <td>1行</td>
      <td>2行</td>
      <td>3行</td>
    </tr>
    <tr>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>匹配表格中的文字，采用contains(`test`)</td>
      <td></td>
      <td></td>
    </tr>
    </table>
</div>

<div class="container-xl a2">
<h1>jquery操作表格的展开与关闭</h1>
搜索表格内容：<input type="text" name="keywords" id="keywords" value="">
<table class="table table-bordered tb2">
  <tr class="type" id="t1">
    <td colspan="3" class="text-center">主要标题列表</td>
  </tr>
  <tbody>
    <tr class="line_t1">
      <td>中国人亿</td>
      <td>2行</td>
      <td>3行</td>
    </tr>
    <tr class="line_t1">
      <td>a</td>
      <td>曹门大哥</td>
      <td></td>
    </tr>
    <tr class="type" id="t2">
      <td colspan="3" class="text-center">下面有什么</td>
    </tr>
    <tr class="line_t2">
      <td>b</td>
      <td></td>
      <td>威海孙总</td>
    </tr>
    <tr class="line_t2">
      <td>c保定第一人</td>
      <td></td>
      <td></td>
    </tr>
    <tr class="line_t2">
      <td>匹配表格中的文字，采用contains(`test`)</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
    </table>
</div>

<div class="container-xl a3">
  <h1>Jquery操作节点树</h1>
  <ul class="mens">
    <li>php类</li>
    <ul>
      <li>PHP从入门到精通</li>
      <li>PHP开发实战宝贝</li>
      <li>PHP模块大全</li>
    </ul>
    <li>JAVA类</li>
    <ul>
      <li>JAVA的未来</li>
      <li>甲骨文公司的定位</li>
      <li>打造一流语言的过程</li>
    </ul>
    <li>dotNET策略</li>
    <ul>
      <li>源自微软的强大实力</li>
      <li>scott的写作</li>
      <li>已经可以跨平台</li>
    </ul>
  </ul>
</div>

<div class="container-xl a4">
  <h1>Jquery操作节点树通过委托处理树</h1>
  <div id="haha"></div>
  <ul class="mensen">
    <li class="leils">php类</li>
    <ul>
      <li>PHP从入门到精通</li>
      <li>PHP开发实战宝贝</li>
      <li>PHP模块大全</li>
    </ul>
    <li class="leils">JAVA类</li>
    <ul>
      <li>JAVA的未来</li>
      <li>甲骨文公司的定位</li>
      <li>打造一流语言的过程</li>
    </ul>
    <li class="leils">dotNET策略</li>
    <ul>
      <li>源自微软的强大实力</li>
      <li>scott的写作</li>
      <li>已经可以跨平台</li>
    </ul>
  </ul>
</div>


<script>
$(document).ready(function () {
    $(`.tb1 tr:odd`).addClass(`odd`);
    $(`.tb1 tr:even`).addClass(`even`);
    $(`.tb1 tr:contains('文字')`).addClass(`bg-info`);

    //使鼠标单击的行高亮显示，并清除兄弟元素的高亮显示
    $(`.tb1 tr`).click(function () {
      $(this).addClass(`bg-dark`).siblings().removeClass(`bg-dark`)
    })

})

$(document).ready(function () { //操作表格的收缩（伸开与关闭）
  $(`tr.type`).click(function () {
    // 获取本分类下的行元素
    $(this).toggleClass(`selected`).siblings(`.line_`+this.id).toggle();
  })
  // 使用input按钮检索表格内容并显示特定CSS
  $(`#keywords`).keyup(function name(params) {
    if($(`#keywords`).val()!=""){
      $(`.a2 table tbody tr`).hide().filter(":contains('"+($(this).val())+"')").show();
    }
  })

  // 使用Jquery操作树
  $(`.mens>li`).click(function () {
    $(this).toggleClass(`closemenu`).next().toggle();
  })

  //通过委托处理树
  $(`.mensen`).click(function (e) {
    let booknames=$(e.target).text();
    let msg=``;
    if($(e.target).parent().hasClass(`leils`)){
      msg=booknames;
    }else{
      let categogo=$(e.target).parent().prev().text();
      msg=categogo+`>>`+booknames;
    }
    $(`#haha`).text(msg);
  })



})




</script>
</body>
</html>
